<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        .yzm {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .passwore_content_i {
            text-align: left;
            font-size: 1rem;
        }

        .phone_content {
            height: auto;
            padding-bottom: 1rem;
        }

        .phone_head {
            font-size: 0.6rem;
            padding: 0.5rem 0;
        }

        .phone_head span {
            color: #f23030;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="user_nav_line"></div>
        <div class="phone_content">
            <div class="phone_head" style="margin-left:0.5rem;">请根据您当前的手机号<span>{{hPhone}}</span>进行身份认证</div>

            <div style="padding:0 0.5rem;">
                <div class="aui-list-item-inner yzm" style="border-bottom: 1px solid #eee;">
                    <div class="aui-list-item-label-icon">
                        <img src="../../image/my/m65.png" alt="" style="width: 1rem;margin-right:1rem;">
                    </div>
                    <div class="aui-list-item-input">
                        <input type="number" placeholder="请输入验证码" style="border-right: 1px solid #eee;" v-model="code">
                    </div>
                    <div class="aui-list-item-label-icon" style="width: 6rem;text-align:center;">
                        <div v-if='isFA == 0' style="color:#f23030;" @click="sendcode">发送验证码</div>
                        <div v-else class="fas" style="color:#999;">{{num}} s</div>
                    </div>
                </div>
            </div>

            <button type="button" name="button" class="user_set_btn_one" @click="gaiban()" style="border-radius:1rem;">下一步</button>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        var app = new Vue({
            el: "#app",
            data: {
                Phone: '',
                hPhone: '',
                code: '',
                password: '',
                isFA: 0,
                num: 60
            },
            created: function() {
                var $_this = this
                $_this.Phone = $api.getStorage('user_phone')
                if ($api.getStorage('user_phone')) {
                    var phone1 = $api.getStorage('user_phone').slice(0, 3)
                    var phone2 = $api.getStorage('user_phone').slice(-4)
                    $_this.hPhone = (phone1 + '****' + phone2)
                }
            },
            methods: {
                sendcode:function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freeuser_getMessage,
                        method: 'post',
                        data: {
                            values: {
                                code: 'UNOHACHA',
                                mobile: Base64.encode('UNO' + $_this.Phone + 'HACHA'),
                                type: 5
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            console.log('发送验证码-----' + JSON.stringify(ret))
                            if (ret.re == 1) {
                                $_this.isFA = 1;
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                setInterval(function() {
                                  $_this.num--;
                                  if($_this.num < 0) {
                                    $_this.isFA = 0;
                                    $_this.num = 60;
                                  }
                                },1000)
                            }
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                gaiban: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freeuser_verification,
                        method: 'post',
                        data: {
                            values: {
                                code: $_this.code,
                                mobile: Base64.encode('UNO' + $_this.Phone + 'HACHA'),
                                type: 5,
                                token: $api.getStorage('token')

                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            api.toast({
                                msg: ret.info,
                                duration: 2000,
                                location: 'bottom'
                            });
                            if (ret.re == 1) {
                                $_this.openPassword('payChange', '密码修改')
                            }
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                openPassword: function(name, type) {
                  var $_this = this;
                    api.openWin({
                        name: name,
                        url: './five_frame_header2.html',
                        pageParam: {
                            type: type,
                            name: name,
                            code: $_this.code,
                            password: $_this.password
                        }
                    });
                }
            }
        })

    };
</script>

</html>
